<template>
  <view :style="colorStyle">
    <view
      class="infobox1"
      :style="{ height: `${menuInfo.top + menuInfo.height}px` }"
    >
      <view class="block1 flex aitems" @click="gourl('/pages/goods/search')">
        <view class="icon">
          <u-icon name="search" size="20" color="#1F1F1F"></u-icon>
        </view>
        <view class="input c858585 f28"> 搜索关键词 </view>
        <view class="btn cfff f24"> 搜索 </view>
      </view>
    </view>

    <view class="infobox2" :style="navTitleModuleStyle">
      <view
        class="more c1F1F1F f24 flex column jcenter aitems"
        @click="screenShow = true"
      >
        <view class=""> 展 </view>
        <view class=""> 开 </view>
        <u-icon name="list" size="20"></u-icon>
      </view>
      <view
        class="list"
        v-for="(item, index) in catelist"
        @click="catelistChange(index)"
        :key="item.id"
      >
        <view class="listinfo1 flex aitems jcenter column">
          <view class="block1">
            <image
              :class="index == catelistindex ? 'active' : ''"
              :src="item.content"
              mode="aspectFill"
            >
            </image>
          </view>
          <view class="block2">
            <view
              :class="
                index == catelistindex
                  ? 'active info1 cfff fontWeight f20'
                  : 'info1 c1F1F1F f20'
              "
            >
              {{ item.title }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view
      class="infobox3 flex"
      :style="infobox3Top"
      v-if="catelist.length !== 0"
    >
      <scroll-view class="left" scroll-y="true">
        <view
          v-for="(item, index) in catelist[catelistindex].hasChildren
            ? catelist[catelistindex].children
            : []"
          class="list"
          @click="cateleftListChange(index)"
          :key="item.id"
        >
          <view
            :class="
              cateleftListindex == index
                ? 'name c525252 f24 active fontWeight'
                : 'name c525252 f24'
            "
          >
            {{ item.title }}
          </view>
        </view>
        <view class="" style="height: 50rpx"> </view>
      </scroll-view>
      <scroll-view class="right" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="block1">
          <swiper
            :indicator-dots="false"
            :autoplay="true"
            :interval="3000"
            :duration="500"
            :circular="true"
          >
            <swiper-item v-for="(item, index, key) in banner" :key="key">
              <image
                :src="item.img"
                mode="aspectFill"
                @click.stop="bannerClickChange(item)"
              ></image>
            </swiper-item>
          </swiper>
        </view>
        <view class="block2 flex aitems between">
          <view class="info1 c858585 fontWeight f24" @click="moren">
            默认
          </view>
          <view class="info1 flex aitems" @click="saleChange">
            <view class="tip1 c858585 fontWeight f24"> 销量 </view>
            <view class="arrow-down-fill">
              <u-icon
                name="arrow-up-fill"
                :color="saleType == 2 ? 'var(--view-theme)' : '#525252'"
                size="6"
              ></u-icon>
              <u-icon
                name="arrow-down-fill"
                :color="saleType == 1 ? 'var(--view-theme)' : '#525252'"
                size="6"
              ></u-icon>
            </view>
          </view>
          <view class="info1 flex aitems" @click="priceChange">
            <view class="tip1 c858585 fontWeight f24"> 价格 </view>
            <view class="arrow-down-fill">
              <u-icon
                name="arrow-up-fill"
                :color="priceType == 2 ? 'var(--view-theme)' : '#525252'"
                size="6"
              ></u-icon>
              <u-icon
                name="arrow-down-fill"
                :color="priceType == 1 ? 'var(--view-theme)' : '#525252'"
                size="6"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="block3">
          <view
            class="goodslist flex aitems"
            v-for="(item, index) in list"
            @click="gourl(`/pages/goods/detail?id=${item.id}`)"
            :key="item.id"
          >
            <view class="goodsimg">
              <image :src="item.img" class="img" mode="aspectFill"></image>
              <view class="no-stock" v-if="item.stock <= 0">
                <image
                  src="http://xpj40szpt.signalpha.cn/img/img101.png"
                  mode="widthFix"
                />
              </view>
            </view>
            <view class="goodsinfo flex column between">
              <view class="">
                <view class="name ellipsis1 c1F1F1F f28">
                  {{ item.name }}
                </view>
                <view class="labelbox">
                  <view
                    class="label themeColor"
                    v-for="(items, indexs) in item.tagName.split(',')"
                    v-if="items"
                    :key="items"
                  >
                    {{ items }}
                  </view>
                </view>
              </view>
              <view class="pricebox flex aitems between">
                <view class="price flex aitems cF65B49 fontWeight">
                  <view class="priceinfo1 flex aitems"
                    ><view class="tip1 f24"> ￥ </view>
                    <view class="tip2 f32">
                      {{ item.goodsPrice }}
                    </view></view
                  >
                  <view class="priceinfo2 flex aitems"
                    ><view class="tip1 f20"> ￥ </view>
                    <view class="tip2 f28">
                      {{ item.marketPrice }}
                    </view></view
                  >
                </view>
                <view class="sale f24 c858585">
                  销量：{{ item.salesVolume + item.salesVolumeVirtual }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <nodata v-if="list.length == 0" />

        <view class="" style="height: 50rpx"> </view>
      </scroll-view>
    </view>

    <u-popup
      mode="top"
      :safeAreaInsetBottom="false"
      :show="screenShow"
      :overlayStyle="{ 'touch-action': 'none' }"
      bgColor="transparent"
    >
      <view class="popbox1" :style="popboxStyle">
        <view class="title c1F1F1F f28"> 全部分类 </view>
        <view
          class="list"
          v-for="(item, index) in catelist"
          @click="catelistChange(index)"
          :key="item.id"
        >
          <view class="listinfo1 flex aitems jcenter column">
            <view class="block1">
              <image
                :class="index == catelistindex ? 'active' : ''"
                :src="item.content"
                mode="aspectFill"
              >
              </image>
            </view>
            <view class="block2">
              <view
                :class="
                  index == catelistindex
                    ? 'active info1 cfff fontWeight f20'
                    : 'info1 c1F1F1F f20'
                "
              >
                {{ item.title }}
              </view>
            </view>
          </view>
        </view>
        <view
          class="down flex aitems jcenter c858585 f24"
          @click="screenShow = false"
        >
          点击收起
          <image src="@/static/cate/7.png" mode=""></image>
        </view>
      </view>
    </u-popup>

    <custom-tab-bar :path="'/pages/cate/cate'" :list="[]"></custom-tab-bar>
  </view>
</template>

<script>
import colors from "@/mixins/color";
import customTabBar from "@/components/CustomTabBar";
import { getStorage, getToken, setStorage } from "@/utils/storage.js";
import {
  adornInfo,
  goodsCategoryTree,
  goodsPage,
  bannerList,
  updateParent,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { handleLoopCallBack } from "@/utils/util";
import { getEnv } from "../../utils/env";
import { getGloBalData } from "../../utils/storage";
import { bannerNavigateTo } from "@/utils/navigateTo";
export default {
  mixins: [colors],
  components: {
    customTabBar,
  },
  data() {
    return {
      screenShow: false,
      saleType: "",
      priceType: "",
      menuInfo: {},
      navTitleModuleStyle: "",
      catelist: [],
      catelistindex: 0,
      cateleftList: [],
      cateleftListindex: null,
      caterightList: [{}],
      params: {
        orderByAsc: "",
      },
      infobox3Top: "",
      popboxStyle: "",

      total: 0,
      list: [],
      current: 1,
      options: {},
      banner: [],
    };
  },
  async onLoad(options) {
    this.options = options;
    uni.hideTabBar();
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:${
      this.menuInfo.height + this.menuInfo.top + 10
    }px`;
    this.infobox3Top = `top:calc(${
      this.menuInfo.height
    }px + 298rpx); height:calc(100vh - 188rpx - ${
      this.menuInfo.height + this.menuInfo.top + 10
    }px - 140rpx)`;
    console.log(this.infobox3Top);
    this.popboxStyle = `padding:${
      this.menuInfo.height + this.menuInfo.top + 15
    }px 0 36rpx 30rpx;`;
    // #endif

    if (getToken()) {
      await this.goodsCategoryTree();
      this.handleGoodsPage();
      this.bannerList();
      if (this.options.uid) {
        updateParent({
          id: this.options.uid,
        });
      }
    } else {
      handleLoopCallBack(async () => {
        await this.goodsCategoryTree();
        this.handleGoodsPage();
        this.bannerList();
        if (this.options.uid) {
          updateParent({
            id: this.options.uid,
          });
        }
      });
      // #ifdef H5
      if (getEnv() == "H5") {
        uni.reLaunch({
          url: "/pages/login/login",
        });
      }
      // #endif
    }
  },
  methods: {
    bannerClickChange(item) {
      bannerNavigateTo(item);
    },
    async bannerList() {
      let { data } = await bannerList({
        type: 5,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let banner = data.data;
        this.banner = banner;
      }
    },
    async goodsCategoryTree() {
      let { data } = await goodsCategoryTree({});
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        this.catelist = list;
      }
    },
    catelistChange(index) {
      this.catelistindex = index;
      if (this.catelist[index].hasChildren) {
        this.cateleftListindex = 0;
      } else {
        this.cateleftListindex = null;
      }
      this.current = 1;
      this.handleGoodsPage();
    },

    async handleGoodsPage() {
      loading();
      let { data } = await goodsPage({
        current: this.current,
        size: 10,
        categoryId:
          this.cateleftListindex == null
            ? this.catelist[this.catelistindex].id
            : this.catelist[this.catelistindex].children[this.cateleftListindex]
                .id,
        // name: this.name,
        // goodsPriceBegin: this.minPrice,
        // goodsPriceEnd: this.maxPrice,
        ...this.params,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    saleChange() {
      this.priceType = "";
      this.screenType = "";
      this.screenShow = false;
      if (this.saleType == "") {
        this.saleType = 2;
      } else if (this.saleType == 2) {
        this.saleType = 1;
      } else if (this.saleType == 1) {
        this.saleType = "";
      }
      this.params.orderByAsc = this.saleType == 1 ? "salesVolume" : "";
      this.params.orderByDesc = this.saleType == 2 ? "salesVolume" : "";
      this.current = 1;
      this.handleGoodsPage();
    },
    priceChange() {
      this.saleType = "";
      this.screenType = "";
      this.screenShow = false;
      if (this.priceType == "") {
        this.priceType = 2;
      } else if (this.priceType == 2) {
        this.priceType = 1;
      } else if (this.priceType == 1) {
        this.priceType = "";
      }
      this.params.orderByAsc = this.priceType == 1 ? "goodsPrice" : "";
      this.params.orderByDesc = this.priceType == 2 ? "goodsPrice" : "";
      this.current = 1;
      this.handleGoodsPage();
    },
    cateleftListChange(index) {
      this.cateleftListindex = index;
      this.current = 1;
      this.handleGoodsPage();
    },
    moren() {
      this.saleType = "";
      this.priceType = "";
      this.screenType = "";
      this.params = {};
      this.current = 1;
      this.handleGoodsPage();
    },
    gourl(url) {
      go(url);
    },
    scrolltolower() {
      if (this.list.length == this.total) return;
      this.current += 1;
      this.handleGoodsPage();
    },
  },
  onShareAppMessage: function (e) {
    return {
      title: "分类",
      path: `/pages/cate/cate?uid=${getGloBalData("userinfo").id}`,
    };
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  background: #fff;
  padding: 0 0 22rpx 0;
  position: fixed;
  width: 100%;
  z-index: 99999;
  /* #ifdef H5 */
  height: 88rpx;
  /* #endif */

  .block1 {
    border-radius: 44rpx;
    background: #f5f5f5;
    width: 496rpx;
    /* #ifdef H5 */
    width: calc(100% - 30rpx - 30rpx);
    /* #endif */
    position: absolute;
    bottom: 22rpx;
    padding: 15rpx 4rpx;
    left: 30rpx;

    .icon {
      margin-left: 28rpx;
    }

    .input {
      margin-left: 16rpx;
    }

    .btn {
      position: absolute;
      right: 0;
      border-radius: 44rpx;
      background: var(--view-theme);
      padding: 15rpx 47rpx;
    }
  }
}

.infobox2 {
  position: fixed;
  z-index: 99;
  /* #ifdef H5 */
  top: 110rpx;
  /* #endif */
  height: 188rpx;
  background: #fff;
  width: calc(100% - 88rpx);
  white-space: nowrap;
  overflow-x: scroll;
  padding: 0 36rpx;

  .more {
    // width: 10rpx;
    position: fixed;
    z-index: 1;
    background: #fff;
    height: 188rpx;
    right: 0;
    width: 88rpx;
  }

  .list {
    display: inline-block;
    margin: 0 32rpx 0 0;
    height: 100%;

    .listinfo1 {
      height: 100%;
    }

    .block1 {
      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 88rpx;
        border: 4rpx solid #fff;
      }

      .active {
        border: 4rpx solid var(--view-theme);
      }
    }

    .block2 {
      margin: 12rpx 0 0;

      .info1 {
        background: #fff;
        padding: 2rpx 24rpx;
      }

      .active {
        border-radius: 20rpx;
        background: var(--view-theme);
      }
    }
  }
}

.infobox3 {
  height: calc(100vh - 188rpx - 88rpx - 120rpx);
  top: 298rpx;
  position: relative;

  .left {
    width: 166rpx;
    background: #f5f5f5;

    .list {
      .name {
        padding: 46rpx 20rpx;
        text-align: center;
      }

      .active {
        background: #fff;
        color: var(--view-theme);
      }
    }
  }

  .right {
    width: calc(100% - 166rpx - 56rpx);
    padding: 24rpx 28rpx;
    background: #fff;

    .block1 {
      swiper {
        height: 171rpx;

        image {
          width: 540rpx;
          height: 171rpx;
          border-radius: 28rpx;
        }
      }
    }

    .block2 {
      padding: 36rpx 44rpx;

      .info1 {
        .tip1 {
        }

        .arrow-down-fill {
          margin-left: 8rpx;
        }
      }
    }

    .block3 {
      .goodslist {
        margin: 0 0 50rpx 0;

        .goodsimg {
          position: relative;
          .img {
            width: 180rpx;
            height: 180rpx;
            border-radius: 28rpx;
          }
          .no-stock {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            image {
              height: 180rpx;
              // height: 180rpx;
              object-fit: cover;
            }
          }
        }

        .goodsinfo {
          height: 180rpx;
          margin-left: 20rpx;
          width: calc(100% - 20rpx - 180rpx);

          .name {
          }

          .labelbox {
            margin: 16rpx 0 0;

            .label {
              font-size: 18rpx;
              padding: 8rpx 12rpx;
              border: 1px solid var(--view-theme);
              display: inline-block;
              border-radius: 8rpx;
              margin: 0 10rpx 0 0;
            }
          }

          .pricebox {
            // margin: 40rpx 0 0;
            .priceinfo2 {
              margin-left: 8rpx;
              text-decoration: line-through;
              color: #999;
            }
            .price {
              .tip1 {
              }

              .tip2 {
              }
            }

            .sale {
            }
          }
        }
      }
    }
  }
}

.popbox1 {
  background: #fff;
  border-radius: 0 0 28rpx 28rpx;
  /* #ifdef H5 */
  padding: 120rpx 0 36rpx 30rpx;

  /* #endif */
  .title {
    margin: 0 0 30rpx 0;
  }

  .list {
    display: inline-block;
    margin: 0 34rpx 30rpx 0;
    height: 100%;

    .listinfo1 {
      height: 100%;
    }

    .block1 {
      image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 88rpx;
        border: 4rpx solid #fff;
      }

      .active {
        border: 4rpx solid var(--view-theme);
      }
    }

    .block2 {
      margin: 12rpx 0 0;

      .info1 {
        background: #fff;
        padding: 2rpx 24rpx;
      }

      .active {
        border-radius: 20rpx;
        background: var(--view-theme);
      }
    }
  }

  .down {
    margin: 48rpx 0 0;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
